<!-- Dom模板 -->
<template>
    
  <div class="addPop">
        <!-- Dom内容 -->
    <div class="popBack">
      <p style="fontWeight:bold">秒杀活动/添加秒杀活动</p>
      <el-row>
        <el-button
          type="primary"
          style="background: #38a28a"
          @click="closePop"
          >返回</el-button
        >
      </el-row>
    </div>
    <div class="popCon">
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item
          label="活动编号"
          prop="ruleFrom.title"
          
          :rules="[{ required: true, message: '名称不能为空' }]"
        >
          <el-input v-model="ruleForm.title" style="width: 400px" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item
          label="活动封面"
          prop="fuleFrom.img"
          :rules="[{ required: true }]"
        >
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="活动状态"
          prop="ruleFrom.type"
          :rules="[{ required: true }]"
        >
          下线
          <el-switch v-model="ruleForm.type "></el-switch>
          上线
        </el-form-item>
        <el-form-item label="开始日期">
        <el-date-picker
          v-model="ruleForm.startTime"
          type="datetime"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          v-model="ruleForm.endTime"
          type="datetime"
        >
        </el-date-picker>
      </el-form-item>
        <div class="btn">
          <el-row>
            <el-button type="primary" style="background: #38a28a"
                @click="addData"
              >添加活动</el-button
            >
          </el-row>
          <el-row>
            <el-button
              type="primary"
              style="background: #eaeaea; color: black"
              @click="closePop"
              >取消</el-button
            >
          </el-row>
        </div>
      </el-form>
    </div>
      
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      imageUrl: false, //弹框图片显示
      ruleForm: {
        "title": '',
        "img": "",
        "type": false,//true 上线 false 下线
        "startTime": "",
        "endTime": "",
        "id":"1",
        "promote":0,
        "isChecked":false,
        "useRange":"所有课程",
        "useDoor":"满199-80",
        "faceValue":80,
        "expiryDate":"2021.11.30",
        "pouponType":0,
      }
    }
  }, 
  // 接收参数
  props:['closePop',"allData" , "addPopaction"],
  // 生命周期 - 创建完成（访问当前this实例）
  created() {}, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {}, // Vue方法定义
  methods: {
    addData(){
        //   添加数据
        this.ruleForm.type = this.ruleForm.type === true ? 0:1;
        this.ruleForm.isChecked = this.ruleForm.isChecked == false ? 'N':'Y'
        this.ruleForm.id = Number(this.allData[this.allData.length -1 ].id) +1
        this.ruleForm.startTime = this.ruleForm.startTime.toLocaleString()
        this.ruleForm.endTime = this.ruleForm.endTime.toLocaleString()
        this.addPopaction(this.ruleForm);
        this.closePop()
    },
    // 弹框 加图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 图片设置
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */

/* 弹框 */
.addPop {
  width: calc(100% - 200px );
  height: calc(100vh - 60px);
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #eaeaea;
  position: fixed;
  left: 200px;
  top: 60px;
  z-index: 99;
}

.popBack {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popCon {
  width: 92%;
  height: calc(100vh - 60px - 120px);
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.popCon form > div {
  margin-top: 10px;
}
.btn {
  width: 100%;
  display: flex;
}
.btn button {
  margin: 10px;
}

.avatar-uploader {
  width: 178px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>